<template>
  <div
    class="white header theme-col--primary"
    data-section-theme="white"
    data-controller="Header"
  >
    <div class="header-announcement-bar-wrapper">
      <div
        class="header-inner container--fluid header-mobile-layout-logo-center-nav-right header-layout-nav-left"
        data-test="header-inner"
      >
        <div class="header-background theme-bg--primary"></div>
        <div class="header-display-desktop" data-content-field="site-title">
          <div class="header-announcement-bar-wrapper">
            <div class="header-title-nav-wrapper">
              <div
                class="header-title header-title--use-mobile-logo"
                data-animation-role="header-element"
              >
                <div class="header-title-logo">
                  <router-link
                    class="preScale scaleIn"
                    to="/"
                    data-animation-role="header-element"
                    style="
                      transition-timing-function: ease;
                      transition-duration: 0.65s;
                      transition-delay: 0.00983607s;
                    "
                  >
                    <img
                      elementtiming="nbf-header-logo-desktop"
                      src="../assets/imgs/Red_Universal_Logo_厚爱健康+copy.png?format=1500w"
                      style="display: block"
                      fetchpriority="high"
                      loading="eager"
                      decoding="async"
                      data-loader="raw"
                    />
                  </router-link>
                </div>
                <!-- <div class="header-mobile-logo">
                    <router-link to="/" data-animation-role="header-element">
          <img elementtiming="nbf-header-logo-mobile" src="https://images.squarespace-cdn.com/content/v1/6072c7c1dc6dc87c9b553c5c/1619481402928-6TPNBM6JDJNX8TV1XYT4/Red_Universal_Logo_厚爱健康+copy.png?format=1500w" style="display:block" fetchpriority="high" loading="eager" decoding="async" data-loader="raw">

                    </router-link>
                  </div> -->
              </div>
              <div class="header-nav">
                <div class="header-nav-wrapper">
                  <nav class="header-nav-list">
                    <div
                      class="header-nav-item header-nav-item--collection header-nav-item--active header-nav-item--homepage"
                    >
                      <router-link class="preScale scaleIn" to="/">
                        HOME
                      </router-link>
                    </div>

                    <div class="header-nav-item header-nav-item--folder">
                      <a
                        class="header-nav-folder-title preScale scaleIn"
                        href="javascript:void(0)"
                      >
                        PRODUCTS
                      </a>
                      <div class="header-nav-folder-content">
                        <div class="header-nav-folder-item">
                          <router-link to="/ecgrecorder">
                            <span class="header-nav-folder-item-content">
                              EDG RECORDER
                            </span>
                          </router-link>
                        </div>
                        <div class="header-nav-folder-item">
                          <router-link to="/multiparametermonitor">
                            <span class="header-nav-folder-item-content">
                              MULTI PARAMETER MONITOR
                            </span>
                          </router-link>
                        </div>
                        <div class="header-nav-folder-item">
                          <router-link to="/portablebloodpressuremeter">
                            <span class="header-nav-folder-item-content">
                              PORTABLE BLOOD PRESSURE METER
                            </span>
                          </router-link>
                        </div>
                        <div class="header-nav-folder-item">
                          <router-link to="/bloodglucosemeter">
                            <span class="header-nav-folder-item-content">
                              BLOOD GLUCOSE METER
                            </span>
                          </router-link>
                        </div>

                        <div class="header-nav-folder-item">
                          <router-link to="/flexiblesmartthermometer">
                            <span class="header-nav-folder-item-content">
                              FLEXIBLE SMART THERMOMETER
                            </span>
                          </router-link>
                        </div>

                        <div class="header-nav-folder-item">
                          <router-link to="/sleepxiaobaoss01">
                            <span class="header-nav-folder-item-content">
                              SLEEP XIAOBAO S-S01
                            </span>
                          </router-link>
                        </div>
                        <div class="header-nav-folder-item">
                          <router-link to="/bluetoothwetnesssensorpad">
                            <span class="header-nav-folder-item-content">
                              BLUETOOTH WETNESS SENSOR PAD
                            </span>
                          </router-link>
                        </div>

                        <div class="header-nav-folder-item">
                          <router-link to="/sleepmonitoringpadsg10">
                            <span class="header-nav-folder-item-content">
                              SLEEP MONITORING PAD S-G10
                            </span>
                          </router-link>
                        </div>

                        <div class="header-nav-folder-item">
                          <router-link to="/sleepmonitoringbeltsb02">
                            <span class="header-nav-folder-item-content">
                              SLEEP MONITORING BELT S-B02
                            </span>
                          </router-link>
                        </div>
                      </div>
                    </div>
                    <div class="header-nav-item header-nav-item--folder">
                      <a
                        class="header-nav-folder-title preScale scaleIn"
                        href="javascript:void(0)"
                      >
                        HEALTH SERVICES
                      </a>
                      <div class="header-nav-folder-content">
                        <div class="header-nav-folder-item">
                          <router-link to="/overseasmedical">
                            <span class="header-nav-folder-item-content">
                              OVERSEAS MEDICAL
                            </span>
                          </router-link>
                        </div>

                        <div class="header-nav-folder-item">
                          <router-link to="/medicalinsurance">
                            <span class="header-nav-folder-item-content">
                              MEDICAL INSURANCE
                            </span>
                          </router-link>
                        </div>
                        <div class="header-nav-folder-item">
                          <router-link to="/appointmentregistration">
                            <span class="header-nav-folder-item-content">
                              APPOINTMENT REGISTRATION
                            </span>
                          </router-link>
                        </div>
                        <div class="header-nav-folder-item">
                          <router-link to="/onlineconsultations">
                            <span class="header-nav-folder-item-content">
                              ONLINE CONSULTATIONS
                            </span>
                          </router-link>
                        </div>

                        <div class="header-nav-folder-item">
                          <router-link to="/homecare">
                            <span class="header-nav-folder-item-content">
                              HOME CARE
                            </span>
                          </router-link>
                        </div>

                        <div class="header-nav-folder-item">
                          <router-link to="/dnatesting">
                            <span class="header-nav-folder-item-content">
                              DNA TESTING
                            </span>
                          </router-link>
                        </div>

                        <div class="header-nav-folder-item">
                          <router-link to="/healthcheckup">
                            <span class="header-nav-folder-item-content">
                              HEALTH CHECKUP
                            </span>
                          </router-link>
                        </div>
                      </div>
                    </div>
                    <div
                      class="header-nav-item header-nav-item--collection software"
                    >
                      <router-link to="/software" class="preScale scaleIn">
                        SOFTWARE
                      </router-link>
                      <!-- <span class="software"><a href="">Software</a></span> -->
                    </div>

                    <div class="header-nav-item header-nav-item--collection">
                      <router-link to="/about" class="preScale scaleIn">
                        ABOUT
                      </router-link>
                    </div>

                    <div class="header-nav-item header-nav-item--collection">
                      <router-link to="/news" class="preScale scaleIn">
                        NEWS
                      </router-link>
                    </div>

                    <div class="header-nav-item header-nav-item--collection">
                      <router-link to="/contact" class="preScale scaleIn">
                        CONTACT
                      </router-link>
                    </div>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="header-display-mobile" data-content-field="site-title">
          <div class="header-actions header-actions--right">
            <div class="showOnMobile"></div>
            <div class="showOnDesktop"></div>
          </div>
          <!-- Title and nav wrapper -->
          <div class="header-title-nav-wrapper">
            <!-- Title -->

            <div
              class="header-title header-title--use-mobile-logo"
              data-animation-role="header-element"
            >
              <div class="header-title-logo">
                <a href="/" data-animation-role="header-element">
                  <!-- <picture><source media="only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px)" srcset="//images.squarespace-cdn.com/content/v1/6072c7c1dc6dc87c9b553c5c/1619481402928-6TPNBM6JDJNX8TV1XYT4/%E5%8E%9A%E7%88%B1%E5%81%A5%E5%BA%B7.png?format=1500w"><source media="only screen and (pointer: coarse) and (min-width: 1025px), screen and (min-width: 800px)" srcset="https//images.squarespace-cdn.com/content/v1/6072c7c1dc6dc87c9b553c5c/1619424597235-E4S6OL9PCJNVX8EPP9XW/Red_Universal_Logo_厚爱健康+copy.png?format=1500w">
                      </picture> -->
                  <img
                    elementtiming="nbf-header-logo-desktop"
                    src="../assets/imgs/Red_Universal_Logo_厚爱健康+copy.png?format=1500w"
                    style="display: block"
                    fetchpriority="high"
                    loading="eager"
                    decoding="async"
                    data-loader="raw"
                  />
                </a>
              </div>
              <div class="header-mobile-logo">
                <a href="/" data-animation-role="header-element">
                  <!-- <picture><source media="only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px)" srcset="//images.squarespace-cdn.com/content/v1/6072c7c1dc6dc87c9b553c5c/1619481402928-6TPNBM6JDJNX8TV1XYT4/%E5%8E%9A%E7%88%B1%E5%81%A5%E5%BA%B7.png?format=1500w"><source media="only screen and (pointer: coarse) and (min-width: 1025px), screen and (min-width: 800px)" srcset="//images.squarespace-cdn.com/content/v1/6072c7c1dc6dc87c9b553c5c/1619424597235-E4S6OL9PCJNVX8EPP9XW/Red_Universal_Logo_%E5%8E%9A%E7%88%B1%E5%81%A5%E5%BA%B7+copy.png?format=1500w"></picture> -->
                  <img
                    elementtiming="nbf-header-logo-mobile"
                    src="../assets/imgs/Red_Universal_Logo_厚爱健康+copy.png?format=1500w"
                    style="display: block"
                    fetchpriority="high"
                    loading="eager"
                    decoding="async"
                    data-loader="raw"
                  />
                </a>
              </div>
            </div>
            <!-- Nav -->
          </div>

          <!-- Burger -->
          <div
            class="header-burger menu-overlay-has-visible-non-navigation-items no-actions"
            data-animation-role="header-element"
          >
            <button
              class="header-burger-btn burger"
              data-test="header-burger"
              @click="closeDaio"
            >
              <span hidden class="js-header-burger-open-title visually-hidden"
                >Open Menu</span
              >
              <span hidden class="js-header-burger-close-title visually-hidden"
                >Close Menu</span
              >
              <div class="burger-box">
                <div
                  class="burger-inner header-menu-icon-halfLineHamburger navRight"
                >
                  <div class="top-bun"></div>
                  <div class="patty"></div>
                  <div class="bottom-bun"></div>
                </div>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="header-menu header-menu--folder-list bright-inverse"
      data-section-theme="bright-inverse"
      data-section-id="overlay-nav"
      data-show-account-login="true"
      data-test="header-menu"
      style="padding-top: 136px"
    >
      <div class="header-menu-bg theme-bg--primary"></div>
      <div class="header-menu-nav">
        <nav class="header-menu-nav-list">
          <div data-folder="root" class="header-menu-nav-folder">
            <div class="header-menu-nav-folder-content">
              <!-- Menu Navigation -->
              <div class="header-menu-nav-wrapper">
                <div
                  class="container header-menu-nav-item header-menu-nav-item--collection header-menu-nav-item--active header-menu-nav-item--homepage"
                >
                  <router-link to="/" aria-current="page">
                    <div class="header-menu-nav-item-content">HOME</div>
                  </router-link>
                </div>
                <div
                  class="container header-menu-nav-item"
                  @click="showProducts($event)"
                >
                  <div data-folder-id="/products">
                    <a
                      class="header-menu-nav-item-content"
                      href="javascript:void(0)"
                    >
                      <!-- <span class="visually-hidden">Folder:</span> -->
                      <span>PRODUCTS</span>
                      <span class="chevron chevron--right"></span>
                    </a>
                  </div>
                </div>
                <div
                  class="container header-menu-nav-item"
                  @click="showHealth($event)"
                >
                  <a
                    data-folder-id="/health-services-1"
                    href="javascript:void(0)"
                  >
                    <div class="header-menu-nav-item-content">
                      <!-- <span class="visually-hidden">Folder:</span> -->
                      <span>HEALTH SERVICES</span>
                      <span class="chevron chevron--right"></span>
                    </div>
                  </a>
                </div>
                <div
                  class="container header-menu-nav-item header-menu-nav-item--collection"
                >
                  <router-link to="software">
                    <div class="header-menu-nav-item-content">SOFTWARE</div>
                  </router-link>
                </div>
                <div
                  class="container header-menu-nav-item header-menu-nav-item--collection"
                >
                  <router-link to="about">
                    <div class="header-menu-nav-item-content">ABOUT</div>
                  </router-link>
                </div>
                <div
                  class="container header-menu-nav-item header-menu-nav-item--collection"
                >
                  <router-link to="news">
                    <div class="header-menu-nav-item-content">NEWS</div>
                  </router-link>
                </div>
                <div
                  class="container header-menu-nav-item header-menu-nav-item--collection"
                >
                  <router-link to="contact">
                    <div class="header-menu-nav-item-content">CONTACT</div>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
          <div
            data-folder="/products"
            class="header-menu-nav-folder productsOpen"
          >
            <div class="header-menu-nav-folder-content">
              <div
                class="header-menu-controls container header-menu-nav-item"
                @click="closeOpen"
              >
                <a
                  class="header-menu-controls-control header-menu-controls-control--active"
                  data-action="back"
                  to="javascript:void(0)"
                >
                  <span class="chevron chevron--left"></span><span>Back</span>
                </a>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/ecgrecorder">
                  <div class="header-menu-nav-item-content">ECG RECORDER</div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/multiparametermonitor">
                  <div class="header-menu-nav-item-content">
                    MULTI PARAMETER MONITOR
                  </div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/portablebloodpressuremeter">
                  <div class="header-menu-nav-item-content">
                    PORTABLE BLOOD PRESSURE METER
                  </div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/bloodglucosemeter">
                  <div class="header-menu-nav-item-content">
                    BLOOD GLUCOSE METER
                  </div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/flexiblesmartthermometer">
                  <div class="header-menu-nav-item-content">
                    FLEXIBLE SMART THERMOMETER
                  </div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/sleepxiaobaoss01">
                  <div class="header-menu-nav-item-content">
                    SLEEP XIAOBAO S-S01
                  </div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/bluetoothwetnesssensorpad">
                  <div class="header-menu-nav-item-content">
                    BLUETOOTH WETNESS SENSOR PAD
                  </div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/sleepmonitoringpadsg10">
                  <div class="header-menu-nav-item-content">
                    SLEEP MONITORING PAD S-G10
                  </div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/sleepmonitoringbeltsb02">
                  <div class="header-menu-nav-item-content">
                    SLEEP MONITORING BELT S-B02
                  </div>
                </router-link>
              </div>
            </div>
          </div>
          <div
            data-folder="/health-services-1"
            class="header-menu-nav-folder healthServicesOpen"
          >
            <div class="header-menu-nav-folder-content">
              <div
                class="header-menu-controls container header-menu-nav-item"
                @click="closeHealOpen"
              >
                <a
                  class="header-menu-controls-control header-menu-controls-control--active"
                  data-action="back"
                  href="javascript:void(0)"
                >
                  <span class="chevron chevron--left"></span><span>Back</span>
                </a>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/overseasmedical">
                  <div class="header-menu-nav-item-content">
                    OVERSEAS MEDICAL
                  </div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/medicalinsurance">
                  <div class="header-menu-nav-item-content">
                    MEDICAL INSURANCE
                  </div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/appointmentregistration">
                  <div class="header-menu-nav-item-content">
                    APPOINTMENT REGISTRATION
                  </div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/onlineconsultations">
                  <div class="header-menu-nav-item-content">
                    ONLINE CONSULTATIONS
                  </div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/homecare">
                  <div class="header-menu-nav-item-content">HOME CARE</div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/dnatesting">
                  <div class="header-menu-nav-item-content">DNA TESTING</div>
                </router-link>
              </div>
              <div class="container header-menu-nav-item">
                <router-link to="/healthcheckup">
                  <div class="header-menu-nav-item-content">HEALTH CHECKUP</div>
                </router-link>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    document.addEventListener("scroll", () => {
      let scrollHight = document.scrollingElement.scrollTop;
      const target = document.querySelector(".header");
      if (scrollHight > 10) {
        target.style.transform = "translateY(-100%)";
      } else {
        target.style.transform = null;
      }
    });
    document.addEventListener("click", (e) => {
      if (e.target.className.includes("header-menu-nav-folder")) {
        console.log(e, "e");
      }
    });
  },
  methods: {
    closeDaio() {
      const closeDom = document.querySelector(".header-burger-btn");
      if (document.body.className.includes("header--menu-open")) {
        document.body.classList.remove("header--menu-open");
        closeDom.classList.remove("burger--active");
        return;
      }
      closeDom.classList.add("burger--active");
      document.body.classList.add("header--menu-open");
    },
    showProducts() {
      const homeArea = document.querySelector(".header-menu-nav-folder");
      const productsOpen = document.querySelector(".productsOpen");
      homeArea.classList.add("header-menu-nav-folder--open");
      productsOpen.classList.add("header-menu-nav-folder--active");
    },
    // 关闭产品
    closeOpen() {
      const homeArea = document.querySelector(".header-menu-nav-folder");
      const productsOpen = document.querySelector(".productsOpen");
      homeArea.classList.remove("header-menu-nav-folder--open");
      productsOpen.classList.remove("header-menu-nav-folder--active");
    },
    showHealth() {
      const homeArea = document.querySelector(".header-menu-nav-folder");
      const healthServicesOpen = document.querySelector(".healthServicesOpen");
      homeArea.classList.add("header-menu-nav-folder--open");
      healthServicesOpen.classList.add("header-menu-nav-folder--active");
    },
    closeHealOpen() {
      const homeArea = document.querySelector(".header-menu-nav-folder");
      const healthServicesOpen = document.querySelector(".healthServicesOpen");
      homeArea.classList.remove("header-menu-nav-folder--open");
      healthServicesOpen.classList.remove("header-menu-nav-folder--active");
    },
  },
};
</script>
<style scoped>
@media screen and (min-width: 1512px) {
  .site-wrapper,
  .sqs-catalog-item-list {
    font-size: calc(1 * 1rem);
  }
}

@media screen and (min-width: 768px),
  screen and (max-width: calc(1511px)) and (orientation: landscape) {
  .site-wrapper,
  .sqs-catalog-item-list {
    font-size: calc((var(--normal-text-size-value) - 1) * 1.2vw + 1rem);
  }
}

@media screen and (min-width: 1512px) {
  .header-nav-item,
  .user-accounts-text-link,
  .cart-style-text,
  .icon-cart-quantity:not(.legacy-cart),
  .language-picker {
    font-size: calc(1.3 * 1rem);
  }
}

.white {
  background-color: #fff;
}

.header {
  position: fixed;
  line-height: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
  height: 275px;
  transition: background 140ms ease-in-out 140ms, transform 140ms ease-in-out;
}

.header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: inherit;
}

.header-background,
.header-background::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.header .header-announcement-bar-wrapper {
  transition: padding 140ms ease-in-out;
}

.header .header-announcement-bar-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  padding-top: 1.6vw;
  padding-bottom: 1.6vw;
  padding-left: 4vw;
  padding-right: 4vw;
  pointer-events: auto;
  box-sizing: border-box;
  height: 100%;
}

.header-title-logo img {
  width: auto;
  max-width: 100%;
  max-height: 228px;
}

img {
  border: 0;
  overflow-clip-margin: content-box;
  overflow: clip;
}

.header-title-logo a {
  display: inline-block;
  max-width: 100%;
  max-height: 228px;
}

.preScale {
  opacity: 0;
  transform: scale(0.9);
  transition-property: transform, opacity;
}

.scaleIn {
  transform: scale(1) !important;
  transition-property: transform, opacity;
}

.scaleIn:not([data-override-initial-global-animation]) {
  opacity: 1 !important;
  transition-property: transform, opacity;
}

a {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  font-size: 20px;
  color: rgb(227, 227, 227);
}

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  /* text-decoration: underline; */
  text-decoration: none;
}

.header-title-nav-wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 0 67%;
  align-items: center;
}

a {
  transition-timing-function: ease;
  transition-duration: 0.65s;
  transition-delay: 0s;
}

.header-display-desktop {
  position: relative;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
}

.header-layout-nav-left .header-title {
  margin-right: 3.5vw;
}

.header-title {
  flex-grow: 0;
  flex-shrink: 0;
  backface-visibility: hidden;
}

.header-title-logo {
  width: auto;
  font-size: 0;
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header .header-title--use-mobile-logo .header-title-logo {
    display: none;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header
    .header-mobile-layout-logo-center-nav-right
    .header-display-mobile
    .header-title
    .header-title-text,
  .header
    .header-mobile-layout-logo-center-nav-right
    .header-display-mobile
    .header-title
    .header-title-logo,
  .header
    .header-mobile-layout-logo-center-nav-right
    .header-display-mobile
    .header-title
    .header-mobile-logo {
    padding-left: 50px;
  }
}

.header-nav-list {
  display: inline-flex;
  flex-wrap: wrap;
}

body:not(.header--menu-open) .header-nav-item--active > a {
  background-repeat: repeat-x;
  background-size: 1px 1px;
  background-position: 0 100%;
  background-position: 0 calc(100% - 0.1em);
  font-size: calc((1.3 - 1) * 1.2vw + 1rem);
  font-family: popins, sans-serif;
}

.header .header-nav-wrapper a,
.header .language-item a {
  text-decoration: none;
  backface-visibility: hidden;
  padding: 0.1em 0;
  /* color: rgb(117, 117, 117); */
  color: rgba(0, 0, 0, 0.7);
  font-weight: 300;
  /* opacity: .9; */
  line-height: 34px;
}

.header-layout-nav-left .header-nav-item:not(:last-child) {
  margin-right: 1.3vw;
}

.header-nav-list > div {
  white-space: nowrap;
}

:not(.header--menu-open) .header-nav-folder-content,
:not(.header--menu-open) .language-picker-content {
  background-color: hsla(0, 0, 100%, 1);
}

.header-nav .header-nav-item--folder {
  position: relative;
}

.header-nav .header-nav-item--folder .header-nav-folder-content {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: auto;
  left: -1em;
  padding: 0.5em 1em;
  text-align: left;
  min-width: 200px;
  z-index: 10;
  background-color: #fff;
}

.header-nav .header-nav-item--folder:hover .header-nav-folder-content,
.header-nav .header-nav-item--folder .header-nav-folder-content.focus-within {
  opacity: 1;
  pointer-events: auto;
}

.header-nav
  .header-nav-item--folder
  .header-nav-folder-content
  .header-nav-folder-item {
  line-height: 1.3;
}

.header-display-mobile {
  display: none;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header-display-mobile {
    display: flex;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header .header-title-nav-wrapper {
    flex: 1 0 calc(100% - 50px);
  }
}

.header-title-nav-wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 0 67%;
  align-items: center;
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header-display-desktop {
    display: none;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header
    .header-mobile-layout-logo-center-nav-right
    .header-display-mobile
    .header-title {
    text-align: center;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header .header-title-nav-wrapper .header-title {
    margin-right: 0;
    flex: 1 0 100%;
    text-align: left;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header
    .header-mobile-layout-logo-center-nav-right
    .header-display-mobile
    .header-burger {
    justify-content: flex-end;
  }
}

.scaleIn:not([data-override-initial-global-animation]) {
  opacity: 1 !important;
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header .header-burger {
    margin-right: 0;
    align-items: flex-end;
    justify-content: flex-end;
    flex: 0 0 50px;
    width: 50px;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header-burger {
    display: flex;
  }
}

.header-menu-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
}

.header--menu-open .header-menu .header-menu-nav-list {
  transform: translatey(0);
}
.header-menu {
  position: fixed;
  z-index: 1;
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, visibility;
  user-select: none;
  text-align: center;
  pointer-events: auto;
}
@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
    background-color: #fff;
  }
}
.header-menu-nav-list {
  position: relative;
  flex-grow: 1;
  width: 100%;
  transform: translatey(20px);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.header-menu-nav-folder {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  justify-content: flex-start;
  overflow-y: scroll;
  overflow-x: hidden;
  transform: translatex(100%);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
}

.header-menu-nav-folder {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  justify-content: flex-start;
  overflow-y: scroll;
  overflow-x: hidden;
  transform: translatex(100%);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
}

.header-menu-nav-folder-content {
  position: relative;
  display: flex;
  width: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: center;
  flex-direction: column;
}

/* .header-menu {
  position: fixed;
  z-index: 1;
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, visibility;
  user-select: none;
  text-align: center;
  pointer-events: auto;
} */

/* @media only screen and (pointer: coarse) and (max-width: 1024px),
screen and (max-width: 799px) {
  .header-menu {
    opacity: 1;
    visibility: visible;
  }
} */
.bright-inverse .productsOpen,
.bright-inverse .healthServicesOpen {
  width: 0;
}
@media screen and (max-width: 799px) {
  .bright-inverse .productsOpen,
  .bright-inverse .healthServicesOpen {
    width: auto;
  }
}
.header-menu-nav-item {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-left: 4vw;
  padding-right: 4vw;
}
@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header-burger {
    display: flex;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header
    .header-mobile-layout-logo-center-nav-right
    .header-display-mobile
    .header-burger {
    justify-content: flex-end;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header
    .header-mobile-layout-logo-center-nav-right
    .header-display-mobile
    .header-title
    .header-title-text,
  .header
    .header-mobile-layout-logo-center-nav-right
    .header-display-mobile
    .header-title
    .header-title-logo,
  .header
    .header-mobile-layout-logo-center-nav-right
    .header-display-mobile
    .header-title
    .header-mobile-logo {
    padding-left: 50px;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header .header-title--use-mobile-logo .header-mobile-logo {
    display: block;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header .header-title--use-mobile-logo .header-mobile-logo a {
    display: inline-block;
    max-height: 86px;
  }
  .header {
    max-height: 136px;
  }
}

.burger {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.burger-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
}

.burger-inner {
  width: 100%;
  height: 100%;
}

.burger-inner .top-bun,
.burger-inner .patty,
.burger-inner .bottom-bun {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  content: "";
  width: 100%;
  transition: transform 250ms cubic-bezier(0.2, 0.6, 0.3, 1),
    width 250ms cubic-bezier(0.2, 0.6, 0.3, 1);
  will-change: transform, width;
}
.burger-inner.header-menu-icon-halfLineHamburger .top-bun {
  transform: translatey(-9.5px);
}
.top-bun,
.patty,
.bottom-bun {
  height: 1px;
}
.burger-inner.header-menu-icon-halfLineHamburger.navRight .patty {
  transform: scalex(0.5) translatex(17.5px);
}
.burger--active .burger-inner .top-bun {
  transform: translatex(3.5px) rotate(-135deg);
  width: 28px;
}
:not(.header--menu-open) .burger-inner .top-bun,
:not(.header--menu-open) .burger-inner .patty,
:not(.header--menu-open) .burger-inner .bottom-bun {
  background-color: rgba(0, 0, 0, 0.7);
}
.burger-inner.header-menu-icon-halfLineHamburger .bottom-bun {
  transform: translatey(9.5px);
}
.burger--active .burger-inner .bottom-bun {
  transform: translatex(3.5px) rotate(135deg);
  width: 28px;
}
.burger--active .burger-inner.navLeft .patty,
.burger--active .burger-inner.navRight .patty,
.burger--active .burger-inner .patty {
  transform: scale(0);
}
.scaleIn:not([data-override-initial-global-animation]) {
  opacity: 1 !important;
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header .header-burger {
    margin-right: 0;
    align-items: flex-end;
    justify-content: flex-end;
    flex: 0 0 50px;
    width: 50px;
  }
}

.header-menu-nav-item a {
  position: relative;
  display: block;
  margin: 1.4vw 5vw;
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.header-menu a {
  opacity: 1;
}

@media screen and (min-width: 576px) {
  .header-menu-nav-item a {
    font-size: 6.6vmin;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header
    .header-mobile-layout-logo-center-nav-right
    .header-display-mobile
    .header-actions {
    justify-content: flex-start;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header .header-actions,
  .header .header-actions-action--social,
  .header .header-actions-action--cta {
    display: none;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header
    .header-mobile-layout-logo-center-nav-right
    .header-display-mobile
    .header-burger {
    justify-content: flex-end;
  }
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header .header-title--use-mobile-logo .header-mobile-logo img {
    max-height: 86px;
  }
}
.header-menu {
  font-size: 1.2em;
}

@media only screen and (pointer: coarse) and (max-width: 1024px),
  screen and (max-width: 799px) {
  .header-menu {
    transition: visibility 600ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}
.header-menu-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
}
.header-menu-nav-list {
  position: relative;
  flex-grow: 1;
  width: 100%;
  transform: translatey(20px);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.header-menu-nav-folder {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  justify-content: flex-start;
  overflow-y: scroll;
  overflow-x: hidden;
  transform: translatex(100%);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
}
.header-menu-nav-folder[data-folder="root"] {
  transform: translatex(0%);
}
.header-menu-nav-folder--active {
  transform: translatex(0);
  will-change: transform;
  background-color: #fff;
}
.header-menu-nav-folder-content {
  position: relative;
  display: flex;
  width: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: center;
  flex-direction: column;
}
.header-menu-nav-item {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-left: 4vw;
  padding-right: 4vw;
}
@media screen and (min-width: 576px) {
  .header-menu-nav-item a {
    font-size: 6.6vmin;
  }
}
.header-menu-nav-item a {
  position: relative;
  display: block;
  margin: 1.4vw 5vw;
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.header-menu-nav-item a {
  font-size: 8.5vmin;
  color: rgb(197, 114, 130);
}
.header-menu a {
  opacity: 1;
}
.header-menu-nav-item-content {
  position: relative;
  display: inline-block;
  pointer-events: none;
}
:is([aria-current="page"], [aria-current="true"])
  .header-menu-nav-item-content {
  /* background-image: linear-gradient(currentColor, currentColor);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 100%; */
}
.chevron {
  position: relative;
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  vertical-align: middle;
  margin-top: -0.14em;
}
.chevron--right {
  transform: rotate(45deg);
}
.chevron--left {
  transform: rotate(-135deg);
}
.header-menu-nav-folder--open {
  transform: translatex(-100%) !important;
}
.header-display-desktop .router-link-exact-active,
.header-menu-nav .router-link-exact-active > div {
  position: relative;
}
.header-display-desktop .router-link-exact-active::after,
.header-menu-nav .router-link-exact-active > div::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(77, 77, 77);
}
.header-title-logo .router-link-exact-active::after {
  visibility: hidden;
}
</style>
